<template>
    <div class="father">
        <h2>父组件</h2>
        <h5>{{ car }}</h5>
        <h5 v-show="true">子组件给的元素：{{ toy }}</h5>//子传父
        <Chil :che="car" :sendToy="GetToy"></Chil>//父传子，组件把 car 这个数据通过 che 这个 prop 传递给了子组件 Chil。
        </div>
</template>

<script setup lang="ts">
import Chil from './Chil.vue';
import { ref } from 'vue';
let car = ref("小标题");
let toy = ref("");
function GetToy(value: string) {
    toy.value = value;
}
</script>

<style scoped>
.father {
    padding: 100px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}  
.father h2 {
    color: #333;
}
</style>
